<template>
  <div class="absolute top-1/3 w-full">
    <h1 class="text-30px text-center">递增的三元子序列</h1>
    <!-- <div class="">
      思路   1.纪录一个大于遍历下标的值做纪录 这个时候必然是已有2个增 2.找到比L下标的数大的为M  3.完成前两步后只需要找下一个坐标是否大于M坐标即可
    </div> -->
  </div>

  <div class="triad">
    <div class="flex">
      <div
        class="triad__box"
        :class="[
          left === index ? 'active__red' : '',
          minIndex === index ? 'active__min' : '',
          selectList.includes(index) ? 'active__orge' : '',
        ]"
        v-for="(item, index) in list"
        :key="index">
        {{ item }}
      </div>
    </div>

    <div class="absolute bottom-140 flex items-center">
      <el-button class="mr-10px" @click="onReset">重置</el-button>
      <el-button class="mr-10px" @click="onNext">下一步</el-button>
      <el-button class="mr-10px" @click="onAnimation">动画结果</el-button>
      <el-button class="mr-10px" @click="increasingTriplet">获取结果</el-button>
      结果:{{ output }}
    </div>
  </div>
</template>

<script setup lang="ts">
const list = [1, 3, 0, 1, 0, 2, 5]
const left = ref(0)
const minIndex = ref(0) // 纪录小坐标

const output = ref(false)
const index = ref(0)
const selectList: number[] = []
function increasingTriplet() {
  for (let i = 0; i < list.length; i++) {
    if (list[i] < list[left.value]) left.value = i
    if (list[i] > list[minIndex.value] && minIndex.value != 0)
      return (output.value = true)
    if (list[i] > list[left.value]) minIndex.value = i
  }

  return (output.value = false)
}

function onNext() {
  index.value++
  if (
    index.value >= list.length ||
    (list[index.value] > list[minIndex.value] && minIndex.value != 0)
  ) {
    output.value = true
    return
  }
  if (list[index.value] < list[left.value]) left.value = index.value
  if (list[index.value] > list[left.value]) minIndex.value = index.value
}

function onAnimation() {
  index.value++
  if (
    index.value >= list.length ||
    (list[index.value] > list[minIndex.value] && minIndex.value != 0)
  ) {
    output.value = true

    selectList.push(index.value)
    return
  }

  if (list[index.value] < list[left.value]) left.value = index.value

  if (list[index.value] > list[left.value]) {
    minIndex.value = index.value
    selectList.length = 0
    selectList.push(index.value, left.value)
  }

  setTimeout(() => {
    onAnimation()
  }, 1000)
}

function onReset() {
  left.value = 0
  minIndex.value = 0
  index.value = 0
  selectList.length = 0
  output.value = false
}
</script>

<style lang="scss" scoped>
.triad {
  height: 100vh;
  display: grid;
  place-items: center;
  position: relative;

  &__box {
    width: 80px;
    height: 80px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
  }
}

.active {
  &__red {
    background-color: red;
  }
  &__min {
    background: rgb(0, 195, 255);
  }
  &__orge {
    background: rgb(222, 166, 84);
  }
}
</style>
